<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>修改地址</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.address-list {
			background-color: #FFFFFF;
			padding-right: 0.75rem;
			margin-bottom: 0.5rem;
		}

		.aui-input,
		input[type="text"],
		input[type="password"],
		input[type="search"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="date"],
		input[type="datetime-local"],
		input[type="time"],
		input[type="number"],
		select,
		textarea {
			font-size: 0.75rem;
			/*color: #CCCCCC!important;*/
		}

		.aui-list .aui-list-item {
			min-height: 2.5rem;
		}

		.xiangxidizhi {
			min-height: 3.5rem !important;
		}

		.aui-list .aui-list-item-label {
			width: 6.6rem;
		}

		img {
			width: 1.5rem;
		}

		.aui-btn {
			display: inline-block;
			width: 17.25rem;
			height: 2.3rem;
			line-height: 2.3rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: #005A93;
			border-radius: 0.3rem;
			font-size: .8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			transition: all 0.1s ease-out;

		}

		.aui-btn:active {
			color: #fff;
			background-color: rgba(0, 90, 147, 0.8);
		}

		.btn-frame {
			position: fixed;
			margin-top: 2rem;
			bottom: 1.5rem;
			text-align: center;
			width: 100%;
		}

		.item-name {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #2E2E2E
		}

		.item-info {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		.item-info textarea {
			background: rgba(250, 250, 250, 0.4);
			border-radius: 0.2rem;
			border: 1px solid rgba(204, 204, 204, 0.4);
			height: 3.5rem;
			padding: 0.4rem;
			color: #999;
			width: 100%;
			float: left;
			box-sizing: border-box;
		}

		.aui-list-item-title img {
			width: 2rem;
			margin-top: 0.55rem
		}

		.aui-list-item-input input {
			text-align: right;
			padding-right: 0 !important;
			padding-left: 0 !important;
			margin-right: 0 !important;
		}

		.aui-list-item-input {
			padding-right: 0 !important
		}

		.aui-list-item-right {
			margin-left: 0.35rem !important
		}

		.aui-list .aui-list-item:active {
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div class="" id="app" v-cloak="">
		<div class="address-list" style="margin-top:0.5rem">
			<ul class="aui-list aui-form-list aui-list-in aui-list-noborder">
				<li class="" style="border-bottom:1px solid rgba(238,238,238,0.5);;margin-left:0.75rem">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label item-name"
							style="font-size:0.75rem;font-family:PingFangSC;font-weight:400;color:#2e2e2e;line-height:1.05rem;">
							收货人
						</div>
						<div class="aui-list-item-input item-info">
							<input id="username" v-model="username" type="text" placeholder="请填写收货人">
						</div>
					</div>
				</li>
				<li class="" style="border-bottom:1px solid rgba(238,238,238,0.5);;margin-left:0.75rem">
					<div class="aui-list-item-inner" style="border:none">
						<div class="aui-list-item-label item-name"
							style="font-size:0.75rem;font-family:PingFangSC;font-weight:400;color:#2e2e2e;line-height:1.05rem;">
							联系方式
						</div>
						<div class="aui-list-item-input item-info">
							<input id="mobile" v-model="mobile" type="tel" maxlength="11" placeholder="请填写手机号">
						</div>
					</div>
				</li>
				
				<li class="" tapmode
					style="border-bottom:1px solid rgba(238,238,238,0.5);;margin-left:0.75rem">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label item-name"
							style="font-size:0.75rem;font-family:PingFangSC;font-weight:400;color:#2e2e2e;line-height:1.05rem;">
							所在地区
						</div>
						<div class="aui-list-item-input item-info"  onclick="select_address()">
							<input v-model="address" readonly type="text" placeholder="选择地区">
						</div>
						<div class="aui-list-item-right">
							<img src="../../image/btn/btn-right.png" />
						</div>
					</div>
				</li>
				<li class="" tapmode
				style="border-bottom:1px solid rgba(238,238,238,0.5);;margin-left:0.75rem;">
				<div class="" style="display:flex;flex-direction: column;justify-content: center;align-items:center;">
					<div class=""
						style="font-size:0.75rem;font-family:PingFangSC;font-weight:400;color:#2e2e2e;line-height:1.05rem;margin-top:5px;margin-bottom:5px;">
						<span style="color:red">点击</span>地图选择地址
					</div>
					<div onclick="open_win('map', './map.html', false)">
						<img src="http://zm.zonmay.com/public/index/map.jpg" style="height:100%;width:750px;">
					</div>
					<!-- <div class="aui-list-item-input item-info">
						<input readonly type="text" placeholder="点击选择地址">
					</div>
					<div class="aui-list-item-right">
						<img src="../../image/btn/btn-right.png" />
					</div> -->
				</div>
				</li>
				<li class="aui-list-item xiangxidizhi aui-list-item-noborder" style="margin-top:-0.6rem">
					<div class="aui-list-item-label item-name"
						style="font-size:0.75rem;font-family:PingFangSC;font-weight:400;color:#2e2e2e;line-height:1.05rem;">
						详细地址
					</div>
				</li>
				<li class="aui-list-item xiangxidizhi aui-list-item-noborder"
					style="margin-top:-1.4rem;padding-bottom:0.1rem">
					<div class="aui-list-item-inner">

						<div class="aui-list-item-input item-info" style="width:100%">
							<textarea id="detailed_address" v-model="detailed_address" placeholder="街道、门牌号等"></textarea>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="">
			<div class="aui-list aui-list-noborder">
				<div class="aui-list-item">
					<div class="" style="margin-top:.5rem;">
						<!-- <div class="aui-list-item-title" tapmode @click="is_default=is_default=='0'?1:0" style="float:left;display:inline-block;width:1.5rem;transform:translateY(.3rem);">
								<img v-if="is_default=='0'" src="../../image/icon/icon-noselect-red.png"  style="width: .95rem;">
								<img v-if="is_default=='1'" src="../../image/icon/right_new.png"  style="width: .95rem;">
							</div> -->
						<div class="aui-list-item-title"
							style="float:left;display:inline-block;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);margin-top:.25rem;">
							设为默认地
						</div>
					</div>
					<div class="aui-list-item-title" tapmode @click="is_default=is_default=='0'?1:0"
						style="float:right;margin-right:0.75rem;">
						<img v-if="is_default=='0'" src="../../image/icon/icon-switch-off.png">
						<img v-if="is_default=='1'" src="../../image/icon/icon-switch-on.png">
					</div>
				</div>
			</div>
		</div>
		<div class="btn-frame" tapmode tapmode @click="addAddress">
			<div class="aui-btn aui-btn-block">
				保存
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/verify.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>

<script type="text/javascript" src="../../res/bluemark_3_city.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			username: '',
			mobile: '',
			province_id: 0,
			province_name: '',
			city_id: 0,
			city_name: '',
			area_id: 0,
			area_name: '',
			address: '',
			detailed_address: '',
			is_default: 0,
			actives: [0, 0, 0]
		},
		methods: {
			addAddress: function () {
				if (vm.mobile == '') {
					toast('手机号不能为空')
					return;
				}
				if (vm.mobile.length < 11 || vm.mobile.length > 11) {
					toast('手机号格式错误')
					return;
				}
				if (!isPoneAvailable(vm.mobile)) {
					toast('手机号格式错误')
					return;
				}
				get_data('api/Address/addAddress', {
					token: $api.getStorage('token'),
					username: vm.username,
					mobile: vm.mobile,
					province_id: vm.province_id,
					province_name: vm.province_name,
					city_id: vm.city_id,
					city_name: vm.city_name,
					area_id: vm.area_id,
					area_name: vm.area_name,
					address: vm.address,
					detailed_address: vm.detailed_address,
					is_default: vm.is_default
				}, function (ret) {
					// alert(JSON.stringify({
					// 	token: $api.getStorage('token'),
					// 	username: vm.username,
					// 	mobile: vm.mobile,
					// 	province_id: vm.province_id,
					// 	province_name: vm.province_name,
					// 	city_id: vm.city_id,
					// 	city_name: vm.city_name,
					// 	area_id: vm.area_id,
					// 	area_name: vm.area_name,
					// 	address: vm.address,
					// 	detailed_address: vm.detailed_address,
					// 	is_default: vm.is_default
					// }))
					toast(ret.msg)
					if (ret.status) {
						send_event('address_change')
						delay_close()
					}
				})
			},

		}
	})
	apiready = function () {

		//
		var temp_localcity = api.getPrefs({
			sync: true,
			key: 'localcity'
		});

		if (temp_localcity) {
			vm.localcity = JSON.parse(temp_localcity);
			// console.log(vm.localcity.categoryname)
			get_data('api/Address/getAddress', {
				region_name: vm.localcity.categoryname,
			}, function (ret) {
				// alert(JSON.stringify(ret))
				if (ret.status == 1) {
					vm.province_id = ret.data.province_id
					vm.province_name = ret.data.province_name
					vm.city_id = ret.data.city_id
					vm.city_name = ret.data.city_name
					vm.area_id = ret.data.area_id
					vm.area_name = ret.data.area_name
					vm.address = vm.province_name + vm.city_name + vm.area_name
					cityData.forEach(function (el, index) {
						if (el.id == vm.province_id) {
							vm.actives[0] = index;
							el.sub.forEach(function (sub1, index1) {
								if (sub1.id == vm.city_id) {
									vm.actives[1] = index1;
									sub1.sub.forEach(function (sub2, index2) {
										if (sub2.id == vm.area_id) {
											vm.actives[2] = index2;
										}
									})
								}
							})
						}
					})
				}

			});
		}
		// alert(JSON.stringify(vm.localcity))
		add_event('address_select', function (ret) {
			//  alert(JSON.stringify(ret))
			vm.detailed_address = ret.detailed_address
			vm.address = ret.address
			vm.province_name = ret.province_name
			vm.city_name = ret.city_name
			vm.area_name = ret.area_name
		})

		add_event('close_add', function (ret) {
			var dialogBox = api.require('dialogBox');
			dialogBox.alert({
				texts: {
					title: '提示',
					content: '确定保存收货地址？',
					leftBtnTitle: '取消',
					rightBtnTitle: '确认'
				},
				styles: {
					bg: '#fff',
					w: 295,
					corner: 10,
					title: {
						marginT: 20,
						titleSize: 17,
						titleColor: '#444444'
					},
					content: {
						marginT: 18,
						marginB: 30,
						color: '#444444',
						size: 17
					},
					left: {
						marginB: 0,
						marginL: 0,
						w: 147.5,
						h: 55,
						corner: 10,
						// bg: 'widget://image/ico/ico_btn_left_bg.png',
						bg: "#fff",
						color: '#999999',
						size: 16
					},
					right: {
						marginB: 0,
						marginL: 0,
						w: 147.5,
						h: 55,
						corner: 10,
						bg: '#fff',
						color: '#005A93',
						size: 16
					},
					horizontalLine: {
						color: '#EEEEEE',
						height: 1
					},
					verticalLine: {
						color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
						width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
					}
				}
			}, function (ret) {
				if (ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
						close_win();
					} else if (ret.eventType == 'right') {
						vm.addAddress()
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				}
			})
		})
	};
	function select_address() {
		document.activeElement.blur();
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: cityData,
			layout: {
				row: 5,
				col: 3,
				height: 30,
				size: 13,
				sizeActive: 15,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#999',
				colorActive: '#000',
				colorSelected: '#000',
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#999',
				colorActive: '#999'
			},
			ok: {
				text: '确定',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#005A93',
				colorActive: '#005A93'
			},
			title: {
				text: '地区',
				size: 18,
				h: 44,
				bg: '#fff',
				color: '#000'
			},
			lineColor: '#E6E6E6',
			actives: vm.actives,
			fixedOn: api.frameName
		}, function (ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					vm.province_id = ret.selectedInfo[0].id
					vm.province_name = ret.selectedInfo[0].name
					vm.city_id = ret.selectedInfo[1].id
					vm.city_name = ret.selectedInfo[1].name
					vm.area_id = ret.selectedInfo[2].id
					vm.area_name = ret.selectedInfo[2].name
					vm.address = vm.province_name + vm.city_name + vm.area_name
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
</script>

</html>